<template>
  <div class="racks" @click.capture="onEmpty($event)">
    <div class="ware" v-for="item in ware" :key="item.RackId">
      <div class="ware_title">
        <p>{{ item.RackName }}</p>
      </div>
      <div class="ware_cn">
        <ul v-for="(value, index) in item.RacklocationsList" :key="value.RackLocationsId">
          <li>第{{ index + 1 }}排</li>
          <li class="border" v-for="(next, index) in value" :key="index" @click="onClick(next)" :class="{
    occupy: next.RackLocationsState == 1,
    locking: next.RackLocationsState == 2,
    deactivate: next.RackLocationsState == 3,
    artificial: next.RackLocationsState == 4,
    active: thisActive == next.RackLocationsId
  }">{{ next.RackLocationsCode }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, defineEmits } from 'vue'
import { GetAllRacklocationsList } from '@/utils/api/BasicManagement/warehouse'

const props = defineProps(['id'])

const emit = defineEmits(['activeChange'])
let ware = ref([])
let thisActive = ref('')

GetAllRacklocationsList(props.id).then((res) => {
  res.Content[0].racksList.forEach(item => {
    let baseArray = item.RacklocationsList;
    item.RacklocationsList = Object.values(baseArray.reduce((res, item) => {
      res[item.RackLocationsColumn] ? res[item.RackLocationsColumn].push(item) : res[item.RackLocationsColumn] = [item];
      return res;
    }, {}));
  })
  ware.value = res.Content[0].racksList
})

function onEmpty(event) {
  if (event.target.tagName !== 'LI') {
    thisActive.value = ''
  }
}

// 点击按钮
function onClick(val) {
  emit('activeChange', val.RackLocationsId)
  thisActive.value = val.RackLocationsId
}

</script>

<style lang="scss" scoped>
.racks {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow-y: scroll;
}

.ware {

  // margin-top: 15px;
  border: 1px solid #dadada;
  display: inline-block;
  vertical-align: top;

  .ware_title {
    background: #f7f7f7;
    width: 100%;

    p {
      text-align: center;
      line-height: 25px;
      font-size: 13px;
      margin: 0;
    }
  }

  .ware_cn {
    padding: 10px 15px 10px 0;
    overflow-x: auto;
    width: 100%;

    ul {
      padding-right: 15px;
      padding-left: 10px;
      white-space: nowrap;
      margin: 0;

      li {
        display: inline-block;
        // width: 4%;
        list-style: none;
        padding: 3px 8px;
        font-size: 14px;
        box-sizing: border-box;
        text-align: center;
      }

      .border {
        border: 1px dashed white;
        margin: 0 -1px -1px 0;

        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}

.occupy {
  background: #67c23a;
  color: white;
}

.deactivate {
  background: #e6a23c;
  color: white;
}

.locking {
  background: #ff0000;
  color: white;
}

.artificial {
  background: #409eff;
  color: white;
}

.active {
  background: white;
  color: #333;
}
</style>
